<template>
  <!-- v-if="routeUrl !='login'" -->
  <div id="PerfectInfo">
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      width="400"
    >
      <template #header>
        <div class="my-header">
          <div class="header-title mb20">
            <button
              style=""
              @click="handleClose"
              class="close-icon curpoin"
              @mouseover="isRotated = true"
              @mouseleave="isRotated = false"
            >
              <img
                style="width: 30px"
                :class="{
                  'rotate-right': isRotated,
                  'rotate-left': !isRotated,
                }"
                src="../../assets/images/close.png"
                alt=""
              />
            </button>
            <div>
              <div
                style="text-align: center"
                class="font-weight-bold mt40 mb40 df"
              >
                <div class="curpoin" @click="handleGoBack">
                  <el-icon v-if="!isFirst"><ArrowLeft /></el-icon>
                </div>
                <div style="flex: 1">完善高考信息</div>
              </div>
            </div>
          </div>
          <div v-if="isFirst">
            <el-form
              ref="ruleFormRef"
              :model="formLabelAlign"
              :rules="rules"
              style="max-width: 460px"
            >
              <el-form-item prop="provinceId">
                <el-select
                  size="large"
                  v-model="formLabelAlign.provinceId"
                  placeholder="请选择高考省份"
                >
                  <el-option
                    v-for="item in store.getters.province.allProvince"
                    :key="item.id"
                    :label="item.provinceName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="grade">
                <el-select
                  size="large"
                  v-model="formLabelAlign.grade"
                  placeholder="请选择高考年份"
                >
                  <el-option
                    v-for="item in optionsYear"
                    :key="item.id"
                    :label="`${item.graduate_time}（${item.title}）`"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 100%"
                  size="large"
                  @click="onSubmit"
                  >下一步</el-button
                >
              </el-form-item>
            </el-form>
            <div class="df footer-box f14">
              <el-icon style="margin: 0 5px"><WarningFilled /></el-icon>
              <div>以上信息提交后，不可以修改</div>
            </div>
          </div>

          <div v-else>
            <el-form
              ref="nextFormRef"
              :model="newxtFormData"
              :rules="nextFormRules"
            >
              <el-form-item prop="nick">
                <el-input
                  v-model="newxtFormData.nick"
                  size="large"
                  placeholder="请输入考生姓名"
                />
              </el-form-item>
              <el-form-item prop="s_school">
                <el-input
                  v-model="newxtFormData.s_school"
                  size="large"
                  placeholder="请输入就读学校"
                />
              </el-form-item>
              <el-form-item prop="sex">
                <el-radio-group v-model="newxtFormData.sex">
                  <el-radio label="0">男生</el-radio>
                  <el-radio label="1">女生</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="loading"
                  style="width: 100%"
                  size="large"
                  @click="nextBnSubmit"
                  >{{ loading ? '设置中...' : '完成' }}</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getClassLv } from '@/api/provinces/province';
import { EditUser, getGkbInfo } from '@/api/user';
import { getToken, removeToken, setToken } from '@/utils/auth';
import { reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { ElMessageBox } from 'element-plus';
import jwtDecode from 'jwt-decode';
const isFirst = ref(true);
const loading = ref(false);
const dialogVisible = ref(false);
const isRotated = ref(false);
const ruleFormRef = ref('');
const nextFormRef = ref('');
const store = useStore();
const formLabelAlign = ref({
  provinceId: '',
  grade: '',
});
const newxtFormData = ref({
  nick: '',
  sex: '',
  s_school: '',
});
const optionsYear = ref([]);
const rules = reactive({
  provinceId: [
    { required: true, message: '请选择高考省份', trigger: 'change' },
  ],
  grade: [
    {
      required: true,
      message: '请选择高考年份',
      trigger: 'change',
    },
  ],
});

const nextFormRules = reactive({
  nick: [{ required: true, message: '请输入考生姓名', trigger: 'blur' }],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  s_school: [{ required: true, message: '请输入就读学校', trigger: 'blur' }],
});
const fetchClassLv = () => {
  getClassLv().then((res) => {
    if (res.data.code == 20000) {
      optionsYear.value = res.data.data;
      // dialogVisible.value = false;
    }
  });
};
const handleGoBack = () => {
  isFirst.value = true;
};
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      fetchGkbInfo();
      isFirst.value = false;
    } else {
      return;
    }
  });
};
const nextBnSubmit = () => {
  let requireData = {};
  requireData.pid = formLabelAlign.value.provinceId;
  requireData.grade = formLabelAlign.value.grade;
  requireData.sex = newxtFormData.value.sex;
  requireData.nick = newxtFormData.value.nick;
  requireData.s_school = newxtFormData.value.s_school;
  nextFormRef.value.validate((valid) => {
    if (valid) {
      onEditUser(requireData);
    } else {
      return;
    }
  });
};
const handleClose = () => {
  ElMessageBox.confirm('关闭后不能正常登录', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      removeToken();
      location.reload();
      dialogVisible.value = false;
    })
    .catch(() => {});
};
const onEditUser = (requireData) => {
  loading.value = true;
  EditUser(requireData)
    .then((res) => {
      if (res.data.code == 20000) {
        setToken(res.token);
        let userInfo = jwtDecode(res.token);
        store.dispatch('user/changeToken', res.token);
        store.dispatch('user/changeProvinceData', userInfo.data);
        store.dispatch('user/changeUserInfo', userInfo.data); //重新将用户信息存储到vuex中
        loading.value = false;
        dialogVisible.value = false;
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const fetchGkbInfo = () => {
  getGkbInfo({ pid: formLabelAlign.value.provinceId }).then((res) => {
    if (res.data.code == 20000) {
      store.dispatch('user/changeIsGkb', res.data.data);
    }
  });
};
watch(
  store.getters.user,
  (newVal) => {
    if (getToken()) {
      if (
        newVal.userInfo.pid !== '' &&
        newVal.userInfo.nick !== '' &&
        newVal.userInfo.graduate_time !== '' &&
        newVal.userInfo.phone !== ''
      ) {
        dialogVisible.value = false;
      } else {
        dialogVisible.value = true;
      }
    } else {
      dialogVisible.value = false;
    }
  },
  { deep: true, immediate: true },
);
fetchClassLv();
</script>

<style lang="scss" scoped>
#PerfectInfo {
  position: relative; /* 设置父元素为相对定位 */
  .close-icon {
    position: absolute;
    top: 20px;
    right: 10px;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 16px;
  }
  .footer-box {
    color: var(--color-text);
    background: var(--background-rgba);
    text-align: center;
    justify-content: center;
    padding: 10px 0;
    border-radius: 6px;
  }
}
.rotate-right {
  transition: transform 0.6s ease;
  transform: rotate(180deg);
}

.rotate-left {
  transition: transform 0.6s ease;
  transform: rotate(0deg);
}
</style>
